---
title: 'Installation'
layout: 'docs-page'
---

<div className="heading mt-0">
  <h3 className="flex items-center m-0 text-2xl">
    <span className="text-base bg-gray-200 text-gray-700 h-8 w-8 rounded-full inline-flex justify-center items-center mt-px mr-3">1</span>
    Install the library
  </h3>
</div>

You can install [react-bnb-gallery](https://www.npmjs.com/package/react-bnb-gallery) from [npm](https://www.npmjs.com/).

```bash
# Using npm
npm install react-bnb-gallery

# Using Yarn
yarn add react-bnb-gallery
```

<div className="heading mt-0">
  <h3 className="flex items-center m-0 text-2xl">
    <span className="text-base bg-gray-200 text-gray-700 h-8 w-8 rounded-full inline-flex justify-center items-center mt-px mr-3">2</span>
    Import compiled CSS
  </h3>
</div>

Alternatively, you may use the library CSS by simply adding this line to your project’s entry point:

```javascript
import 'react-bnb-gallery/dist/style.css'
```

<div className="heading mt-0">
  <h3 className="flex items-center m-0 text-2xl">
    <span className="text-base bg-gray-200 text-gray-700 h-8 w-8 rounded-full inline-flex justify-center items-center mt-px mr-3">3</span>
    Start using the library
  </h3>
</div>

Following code is simplest usage:

```javascript
import React, { useState } from 'react';
import ReactBnbGallery from 'react-bnb-gallery';

const PHOTOS = [
  'https://images.unsplash.com/photo-1470238660368-09dd17cab0b5',
  'https://images.unsplash.com/photo-1565472604484-fd8b0414aaf3',
  'https://images.unsplash.com/photo-1594240094495-1b9177b5fefc',
];

class GalleryExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Open gallery
      </button>
      <ReactBnbGallery
        show={isOpen}
        photos={PHOTOS}
        onClose={() => setIsOpen(false)}
      />
    </>
  );
};
```